<template>
    <div v-if="showPage">
      <div class="myComments-main">
        <p class="myComments-header">全部评论（{{totalCount}}）</p>
        <myComment v-for="(item,index) in commentList" :key="index" :item="item" @delComment ="delComment"></myComment>
      </div>
      <bottoms info="暂无评论消息"  tips="评论你所喜爱的～"></bottoms>
    </div>
</template>

<script>
  import myComment from "@/components/myComment/index"
  import bottoms from '@/components/reachBottom/index'
    export default {
        name: "myComment",
      components:{
        myComment,
        bottoms
      },
      data(){
          return{
            showPage: true,
            commentList:[],
            loadingEnd:{
              moduleOne: false,
            },
            totalPage: 1,
            currentPage: 1,
            totalCount: 0
          }
      },
      computed:{
        hideLoading(){
          if(this.loadingEnd.moduleOne){
            setTimeout(function(){
              ﻿uni.hideLoading()
            }, 800)
          }
        }
      },
      methods:{
        delComment(id){
          let num = this.commentList.findIndex((item) => {
              return (parseInt(item.comment_id) === parseInt(id))
            })
          this.commentList.splice(num,1)
          this.totalCount --
          if(this.commentList.length === 0){
            this.viewLoad()
          }
        },
        getList(){
          this.$ajax
            .post(this.$api.getMemberCommentList,{page: this.currentPage})
            .then(res => {
              this.commentList.push(...res.data);
              this.loadingEnd.moduleOne = true
              this.totalPage = res.total_page
              this.totalCount = res.total_count
              if(res.total_count === 0){
                this.$store.dispatch("changeIsEmpty", true);
              } else {
                this.$store.dispatch("changeIsEmpty", false);
              }
            })
            .catch(err => {
              this.loadingEnd.moduleOne = true
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        },
        viewLoad(){
          this.currentPage = 1
          this.commentList = []
          this.$store.dispatch("changeIsMore", false);
          this.$store.dispatch("changeIsEnd", false);
          this.$store.dispatch("changeIsEmpty", false);
          this.loadingEnd = {
            moduleOne: false,
          };
          ﻿uni.showLoading({
            title: '加载中',
            mask: true
          });
          this.getList();
        },
      },
      onPullDownRefresh(){
        this.viewLoad()
        ﻿uni.stopPullDownRefresh() //停止下拉刷新
      },
      onReachBottom(){
        if(this.totalPage > this.currentPage){
          this.$store.dispatch("changeIsMore", true);
          this.$store.dispatch("changeIsEnd", false);
          this.currentPage++
          this.getList();
        } else {
          this.$store.dispatch("changeIsEnd", true);
          this.$store.dispatch("changeIsMore", false);
        }
      },
      onHide(){
        this.showPage= false;
      },
      onShow(){
        this.showPage= true;
      },
      onLoad() {
        this.viewLoad()
      }
    }
</script>

<style scoped>
  .myComments-main{
    padding-bottom: 30rpx;
    box-sizing: border-box;
  }
.myComments-header{
  background-color: #F6F6F8;
  padding: 18rpx 30rpx;
  box-sizing: border-box;
  font-size: 22rpx;
  color: #A7A6AE;
  font-weight: bold;
}
</style>
